<template>
  <div class="nav">
    <el-row>
      <el-col :span="2">
        <a href="/" class="logo">Logo</a>
      </el-col>
      <el-col :span="8">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          text-color="#8cc5fF"
          active-text-color="#409eff"
          @select="handleSelect"
          :router="true"
        >
          <el-menu-item index="/index">首页</el-menu-item>
          <!-- <el-menu-item index="/children?id=1">电影</el-menu-item>
          <el-menu-item index="/3">电视剧</el-menu-item>
          <el-menu-item index="/4">动漫</el-menu-item>
          <el-menu-item index="/5">娱乐</el-menu-item>
          <el-menu-item index="/admin">管理</el-menu-item>
          <el-menu-item hidden="true" index="6">用来隐藏下标的！！！</el-menu-item>-->
          <el-submenu index="2">
            <template slot="title">视频分类</template>
            <el-menu-item
              :index="'/children?id='+item.id"
              v-for="(item,index) in list"
              :key="index"
            >{{item.typeName}}</el-menu-item>
            <!-- <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>-->
          </el-submenu>
          <el-menu-item index="/vip">VIP视频区</el-menu-item>
          <el-menu-item
            index="/admin"
            v-if="this.$store.state.user&&(this.$store.state.user.role==3||this.$store.state.user.role==2)"
          >管理</el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="6">
        <div class="search-box">
          <el-input placeholder="搜索视频" v-model="input" class="input-search">
            <i slot="suffix" class="el-input__icon el-icon-search" @click="toSearch()"></i>
          </el-input>
        </div>
      </el-col>
      <el-col :span="8">
        <ul class="menu-list-account" v-if="this.$store.state.user==null">
          <router-link
            :to="{name:'login'}"
            tag="li"
            class="nologin"
            :class="{active:true}"
            @click.native="resetActiveIndex('999')"
          >登录</router-link>
          <router-link
            :to="{name:'register'}"
            tag="li"
            class="nologin"
            :class="{active:'22'==activeIndex}"
            @click.native="resetActiveIndex(-1)"
          >注册</router-link>
        </ul>

        <ul class="menu-list-account-login" v-if="userData!=null">
          <li class="login user" @click="toPerson">
            <div class="photo">
              <my-photo
                :photo="this.$store.state.user.photo"
                :userName="this.$store.state.user.userName"
                :userId="this.$store.state.user.id"
                line-height="38px"
                font-size="19px"
              ></my-photo>
            </div>
            <p class="userName" :class="{vipname:isVip}">
              {{this.$store.state.user.userName}}
              <i class="vip-log" v-if="isVip" :title="'vip到期时间'+this.$store.state.user.vipTime"></i>
            </p>
          </li>

          <router-link :to="{name:'sx'}" tag="li" class="login" >
            <el-badge :hidden="num<=0" :value="num" class="item">私信</el-badge>
          </router-link>

          <li class="login" @click="quit">退出</li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      activeIndex: "/index",
      menuName: ["/index", "/children?id=1", "/vip", "/4", "/5", "/admin"], //配置菜单激活
      input: "",
      userData: null,
      list: [],
      num:0
    };
  },
  mounted: function() {
    if(localStorage.getItem("userData")==='undefined') return;
    this.userData = JSON.parse(localStorage.getItem("userData"));
    this.getType1();
    this.getUnRead();
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    resetActiveIndex(n) {
      console.log(n);
      this.activeIndex = n + "";
      console.log(this.activeIndex);
    },
    /*跳转到搜索页面 */
    toSearch() {
      let routeUrl = this.$router.resolve({
        name: "search",
        query: {
          key: this.input
        }
      });
      window.open(routeUrl.href, "_blank");
    },
    //跳转到个人中心页面
    toPerson() {
      this.$router.push({ name: "person", params: { id: 4 } });
    },
    //退出登录
    quit() {
      this.$confirm("即将退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "退出成功!"
          });
          localStorage.removeItem("userData");
          this.$store.commit("removeUser");
          this.userData = null;
          //this.$router.push({ name: "index" });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出"
          });
        });
    },
    //获取一级分类
    getType1() {
      this.axios.post("videoType/type1List").then(res => {
        this.list = res.data.page.list;
      });
    },
    getUnRead(){
      if(this.$store.state.user)
      this.axios.post("letter/allUnread",{
        ownerId:this.$store.state.user.id
      }).then(res=>{
        this.num = res.data.num
      })
    }
  },
  watch: {
    activeIndex: function(val) {
      console.log(val);
    },
    input: function() {},
    $route: function(val) {
      this.userData = JSON.parse(localStorage.getItem("userData"));
      //console.log(this.userData, val);
      //判定是否需要隐藏em-menu菜单下标

      this.activeIndex = "6";
      for (var i in this.menuName) {
        if (this.menuName[i] == val.path) {
          this.activeIndex = val.path;
          return;
        }
      }
      this.getUnRead();
    }
  },
  computed: {
    myUserData: function() {
      console.log("header", this.$store.state.user);
    },
    isVip: function() {
      let time = this.$store.state.user.vipTime;
      console.log("time", time);
      return +new Date() < +new Date(time);
    }
  }
};
</script>




<style lang="scss" scoped>
/*导航栏*/
.nav {
  margin: 0 auto;
  width: 1180px;
  border-bottom: solid 1px #e6e6e6;
  .logo {
    font-size: 30px;
    line-height: 60px;
    color: #409eff;
  }
  .el-menu-demo {
    border: none;
  }
}
/*搜索框*/
.search-box {
  line-height: 59px;

  .el-icon-search {
    margin: 0 10px 0 0;
    font-size: 20px;
    color: #409eff;
  }
}
/*账户操作*/
.menu-list-account {
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
  height: 60px;
  margin: 0;
  font-size: 14px;
  color: #409eff;
  li {
    margin: 0 10px;
    /* border: 1px solid #409eff; */
  }
  .nologin {
    border-radius: 10px;
    line-height: normal;
    width: 40px;
    line-height: 30px;
    text-align: center;

    &:hover {
      background: #8bc3fc;
      color: white;
      cursor: pointer;
    }
  }
  .router-link-active {
    background: #8bc3fc;
    color: white;
  }
}
.menu-list-account-login {
  display: flex;
  list-style: none;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #8bc3fc;
  &:hover {
    cursor: pointer;
  }
  .user {
    display: flex;
    .photo {
      width: 38px;
      height: 38px;
      border-radius: 19px;
      overflow: hidden;
      margin-right: 10px;
    }

    .userName {
      margin: auto 0;
      line-height: 39px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #909090;
    }
  }
  .login {
    line-height: 39px;
    padding: 12px 10px 10px 10px;
    &:last-child {
      margin-right: 0px;
    }
    &:hover {
      background-color: #e6e6e6;
    }
  }
}
</style>

